<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            height: 100%;
        }
        
        .footer {
            position: absolute;
            left: 50%;
            bottom: 100px;
            width: 30px;
            height: 30px;
            margin-left: -50px;
            border: 1px solid #f60;
        }
        
        .plus {
            position: absolute;
            right: 20px;
            top: 50%;
            width: 20px;
            height: 20px;
            border: 1px solid #260;
            transition: all 2s;
        }
        
        .jian {
            position: absolute;
            display: none;
            right: 20px;
            top: 50%;
            width: 20px;
            height: 20px;
            transform: rotate(0deg);
            transition: all 0.4s linear;
        }
    </style>
</head>

<img class="plus" src="./img/plus.png" alt="" />
<img class="jian" width="20" height="20" src="./img/jian.png" alt="" />

<div class="footer"></div>

<body>
    <script>
        const plus = document.querySelector(".plus");
        const jian = document.querySelector(".jian");
        let balls = [{
            show: false,
        }, {
            show: false,
        }, {
            show: false,
        }, {
            show: false,
        }, ];
        plus.onclick = function(e) {
            const eve = e || window.event;
            const img = document.createElement('img')
            img.setAttribute('src', "./img/jian.png")
            img.style.cssText = `
            position: absolute;
            right: 20px;
            top: 50%;
            width: 20px;
            height: 20px;
            border: 1px solid #260;
            transition: all 2s;`
            document.body.appendChild(img)
            let first = true
            balls.forEach((v) => {
                console.log(1);
                if (!v.show && first) {
                    v.el = img;
                    v.show = true;
                    first = false
                    jian.style.display = 'block'
                        // jian.style.left = '100px' 
                    jian.style.transform = ' translateX(-100px)  rotate(90deg)'
                    return
                }
            })
            move()
        };
        const footer = document.querySelector('.footer')

        function move() {
            let count = balls.length;
            while (count--) {
                let item = balls[count];
                if (item.show) {
                    const {
                        el
                    } = item;
                    console.log(el);
                    const rect = el.getBoundingClientRect();
                    let x = rect.left - footer.offsetLeft;
                    let y = -(window.innerHeight - rect.top - 115)
                    item.el.style.transform = `translate(-${x}px,${-y}px)`;
                }
            }

            // balls.forEach(v => {
            //     if (v.show) {
            //         document.body.removeChild(v.el)
            //         v.show = false;
            //         v.el = null
            //     }
            // })
        }
    </script>
</body>

</html>